<template>
  <div class="tab-bar">
    <ul class="title">
      <li
        v-for="(item, index) in title"
        :key="index"
        @click="changeIndex(index)"
        :class="{'tab-control-active':currentIndex===index}"
      >
        <span>{{item}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "TabBar",
  props: {
    title: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  components: {},
  data() {
    return {
      currentIndex: 0
    };
  },
  methods: {
    // *******************************网络请求*******************************
    // *******************************逻辑处理*******************************
    changeIndex(index) {
      this.currentIndex = index;
      this.$emit('itemClick',index)
    }
  },
  computed: {},
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import ; 引入公共css类
.tab-bar {
  margin-top: 10px;
  .title {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    span {
      padding: 0 7px 3px;
      // border-bottom: 3px solid #fff;
    }
  }
  .tab-control-active {
    color: #ff5777;
    span {
      border-bottom: 3px solid #ff5777;
    }
  }
}
</style>